<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="400px"
      center
      :show-close="false"
      :close-on-click-modal="false"
      @close="close('newTaskForm')"
    >
      <el-form ref="newTaskForm" :rules="rules" :model="newTaskForm" label-width="110px">
        <el-form-item label="任务端名称" prop="portName">
          <el-input v-model="newTaskForm.portName" placeholder="请输入任务端名称" style="width: 90%;"></el-input>
          <span>端</span>
        </el-form-item>
        <el-form-item label="界面负责人员" prop="pageUserId">
          <el-select
            v-model="newTaskForm.pageUserId"
            multiple
            placeholder="请选择界面负责人员"
            style="width: 90%;"
          >
            <el-option
              v-for="item in interfaceManagerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否分配JAVA">
          <el-radio-group v-model="newTaskForm.isJava">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWebPrincipalList } from "@/service/progressApi";

import bus from "@/components/bus";

export default {
  name: "newTaskDailog",
  props: ["versionId"],
  data() {
    return {
      dialogFormVisible: false,
      title: "",
      pageUserNames: "",
      newTaskForm: {
        id: null,
        verId: null,
        portName: "",
        pageUserId: [],
        isJava: null,
      },
      options: [],
      rules: {
        portName: [
          {
            required: true,
            message: "比如：输入XXX安卓端，XXXios端，XXXPC端",
            trigger: ["blur"],
          },
        ],
        pageUserId: [
          { required: true, message: "请选择界面负责人", trigger: "blur" },
        ],
      },
      interfaceManagerList: [], //界面负责人下拉列表
    };
  },
  created() {
    bus.$on("versionId", (e) => {
      console.log(e);
    });
  },
  methods: {
    showDailog(title, item) {
      this.title = title;
      this.dialogFormVisible = true;
      getWebPrincipalList(this.versionId).then((res) => {
        if (res.code === 0) {
          this.interfaceManagerList = res.data;
          if (item) {
            //显示数据
            this.newTaskForm.id = item.id;
            //先判断传来的pageUserId是不是数组的类型 不是的话需要转成数组
            if (typeof item.pageUserId === "string") {
              this.newTaskForm.pageUserId = item.pageUserId
                .split(",")
                .map((item) => Number(item));
            }
            console.log("界面负责人下拉列表", this.interfaceManagerList);
            console.log("原有的负责人id", this.newTaskForm.pageUserId);
            //通过双重循环 将原有负责人id存在于下拉列表中的存起来  如果存在 就重新赋值 覆盖之前的负责人id,如果不存在，就赋值为下拉列表的第一人选
            let arr = [];
            this.newTaskForm.pageUserId.forEach((x) => {
              this.interfaceManagerList.forEach((y) => {
                if (y.id === x) {
                  arr.push(x);
                }
              });
            });
            if (arr.length > 0) {
              this.newTaskForm.pageUserId = arr;
            } else {
              this.newTaskForm.pageUserId[0] = this.interfaceManagerList[0].id;
            }
            this.newTaskForm.isJava = item.isJava;
            this.newTaskForm.portName = item.portName.replace("端", "");
          } else {
            this.newTaskForm.portName = "";
            this.newTaskForm.pageUserId = [];
          }
        } else {
          console.log("获取界面负责人下拉列表失败");
        }
      });
    },
    //新建/修改任务端弹框关闭的时候清空数据，关闭弹框
    close() {
      this.newTaskForm.isJava = "";
      this.$refs["newTaskForm"].clearValidate();
      this.$refs["newTaskForm"].resetFields();
      this.dialogFormVisible = false;
    },
    //确定新建/修改弹框的时候给父组件传递事件和数据
    sure() {
      this.$refs["newTaskForm"].validate((valid) => {
        if (valid) {
          this.$emit("submitTaskForm", this.newTaskForm, this.title);
        } else {
          this.$message.info("请检查填写的信息");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>